<template>
	<view class="settlement">
		<view class="checkAll">
			<radio :checked="isCheckAll" color="#c00000" @click="changeCheckAllState(isCheckAll)" /><text>全选</text>
		</view>
		<view class="totalPrice">
			合计:<text class="price">￥{{checkPrice | formatPrice}}</text>
		</view>
		<view class="payment" @click="payment">
			<text>结算({{checkTotal}})</text>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		name: "my-settlement",
		data() {
			return {
				// 订单编号
				orderNumber: '',
				// 预支付返回的支付对象
				payObj: {}
			};
		},
		computed: {
			...mapGetters('m_cart', ['isCheckAll', 'checkTotal', 'checkPrice']),
			...mapGetters('m_user', ['fullAdress']),
			...mapState('m_user', ['token']),
			...mapState('m_cart', ['cart'])
		},
		filters: {
			// 格式化价格样式
			formatPrice(price) {
				return Number(price).toFixed(2);
			}
		},
		methods: {
			...mapMutations('m_cart', ['goodsStates']),
			// 改变全选状态
			changeCheckAllState(checkAllState) {
				this.goodsStates(!checkAllState);
			},
			// 支付结算
			payment() {
				if (!this.checkTotal) return uni.$showToast('请选择商品');
				if (!this.fullAdress) return uni.$showToast('请选择收货地址');
				if (!this.token) return uni.switchTab({
					url: '../../pages/my/my'
				});
				// 创建订单
				this.createOrderForm();
				// 拿到订单编号发起预支付
				this.advancePayment();
				// 最终支付
				this.finalPayment();
			},
			// 创建订单
			async createOrderForm() {
				const orderObj = {
					// order_price: this.checkPrice,
					order_price: 0.01,
					consignee_addr: this.fullAdress,
					goods: []
				};
				orderObj.goods = this.cart.filter((item) => {
					return item.goods_state == true
				}).map((item) => {
					return {
						goods_id: item.goods_id,
						goods_number: item.goods_number,
						goods_price: item.goods_price
					}
				});
				const {
					data: res
				} = await uni.$http.post('/api/public/v1/my/orders/create', orderObj);
				// if(res.meta.status !== 200) return uni.$showToast('创建订单失败');
				// this.orderNumber = res.message.order_number;
				// 创建一个假订单编号
				// ----------------------------------------
				this.orderNumber = "GD20180504000000000045";
			},
			// 订单预支付
			async advancePayment() {
				const {
					data: res
				} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
					order_number: this.orderNumber
				});
				// if(res.meta.statue !== 200) return uni.$showToast('创建预支付订单失败');
				// this.payObj = res.message.pay;
				// 创建一个假的支付对象
				this.payObj = {
					"timeStamp": "1525681145",
					"nonceStr": "BkPggorBXZwPGXe3",
					"package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
					"signType": "MD5",
					"paySign": "D1642DEEF1663C8012EDEB9297E1D516"
				};
			},
			// 最终支付
			async finalPayment() {
				const [err, success] = await uni.requestPayment(this.payObj);
				if (err) return uni.$showToast('订单未支付');
				const {
					data: res
				} = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {
					order_number: this.orderNumber
				});
				if (res.meta.status !== 200) return uni.$showToast('订单未支付');
				uni.showToast({
					title: '支付完成！',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="less">
	.settlement {
		z-index: 999;
		width: 100%;
		height: 65px;
		padding: 5px 0 0 5px;
		border-top: 1px solid #efefef;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.checkAll {
			display: flex;
			align-items: center;
		}

		.totalPrice {
			.price {
				color: #c00000;
			}
		}

		.payment {
			width: 115px;
			height: 60px;
			background-color: #c00000;
			line-height: 60px;
			text-align: center;
			color: #fff;
		}
	}
</style>
